<template>
  <div class="index-root">
    <div style="width: 400px;height: 500px;border: 1px solid red">
      <line-table :tableHeader="tableHeader" :table-data="tableData">
        <template v-slot:sex="{row}">
          {{row.sex}}
        </template>
      </line-table>
    </div>

  </div>
</template>

<script>
  import { reactive, toRefs, onMounted, ref, watch, computed } from '@vue/composition-api'
  import lineTable from '@/components/ServiceComponents/lineTable'

  export default {
    name: 'index',
    components: {
      lineTable
    },
    setup(props, content) {
      let data = reactive({
        tableHeader: [{ name: '姓名', prop: 'name', width: '200px', align: 'left' }, { name: '性别', prop: 'sex', type: 'slot' }, { name: '年龄', prop: 'age' }],
        tableData: [{ name: '王红坤', sex: '男', age: '25' }, { name: '张飞', sex: '男', age: '25' }, { name: '刘备', sex: '男', age: '25' }]
      })
      return { ...toRefs(data) }
    }
  }
</script>

<style scoped lang="scss">
  .index-root {

  }
</style>
